import React, { useState, useRef, useEffect } from 'react';

/**
 * 滑动验证组件属性接口
 */
interface SliderCaptchaProps {
  onVerify: (success: boolean) => void; // 验证结果回调函数
}

/**
 * 滑动验证组件
 * 提供拖拽滑块验证功能，包含拼图块拖动和位置验证
 */
const SliderCaptcha: React.FC<SliderCaptchaProps> = ({ onVerify }) => {
  // 状态管理
  const [sliderPosition, setSliderPosition] = useState(0); // 滑块当前位置
  const [targetPosition, setTargetPosition] = useState(0); // 目标位置
  const [isDragging, setIsDragging] = useState(false); // 是否正在拖动
  const [isVerified, setIsVerified] = useState(false); // 是否已验证
  const [showResult, setShowResult] = useState(false); // 是否显示验证结果
  const [verificationResult, setVerificationResult] = useState<'success' | 'fail' | null>(null); // 验证结果
  const [dragProgress, setDragProgress] = useState(0); // 拖动进度百分比

  // 引用管理
  const startXRef = useRef(0); // 拖动开始时的鼠标X坐标
  const sliderStartXRef = useRef(0); // 拖动开始时滑块的位置
  const currentPositionRef = useRef(0); // 当前滑块位置（用于验证）

  /**
   * 初始化目标位置
   * 组件挂载时生成随机的目标位置
   */
  useEffect(() => {
    const maxX = 200; // 最大可移动距离
    const randomX = Math.random() * maxX; // 生成随机目标位置
    setTargetPosition(randomX);
    setSliderPosition(0); // 重置滑块位置
  }, []);

  /**
   * 鼠标按下事件处理
   * 开始拖动操作
   */
  const handleMouseDown = (e: React.MouseEvent) => {
    if (isVerified) return; // 已验证时不允许拖动
    
    e.preventDefault(); // 防止默认行为
    setIsDragging(true); // 设置拖动状态
    startXRef.current = e.clientX; // 记录起始鼠标位置
    sliderStartXRef.current = sliderPosition; // 记录起始滑块位置
    
    // 添加全局事件监听
    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);
  };

  /**
   * 鼠标移动事件处理
   * 更新滑块位置和进度
   */
  const handleMouseMove = (e: MouseEvent) => {
    if (!isDragging) return; // 未在拖动状态时忽略
    
    e.preventDefault(); // 防止页面滚动
    const deltaX = e.clientX - startXRef.current; // 计算鼠标移动距离
    const newPosition = Math.max(0, Math.min(200, sliderStartXRef.current + deltaX)); // 限制滑块范围
    currentPositionRef.current = newPosition; // 更新当前位置引用
    setSliderPosition(newPosition); // 更新滑块位置状态
    
    // 计算拖动进度百分比
    const progress = (newPosition / 200) * 100;
    setDragProgress(progress);
  };

  /**
   * 鼠标释放事件处理
   * 结束拖动并进行验证
   */
  const handleMouseUp = () => {
    if (!isDragging) return; // 未在拖动状态时忽略
    
    setIsDragging(false); // 设置拖动状态为false
    // 移除全局事件监听
    document.removeEventListener('mousemove', handleMouseMove);
    document.removeEventListener('mouseup', handleMouseUp);
    
    // 验证逻辑
    const tolerance = 15; // 容错范围（像素）
    const currentPosition = currentPositionRef.current; // 获取当前位置
    const isCorrect = Math.abs(currentPosition - targetPosition) <= tolerance; // 判断是否在容错范围内
    
    // 输出调试信息
    console.log('验证信息:', {
      currentPosition,
      targetPosition,
      difference: Math.abs(currentPosition - targetPosition),
      tolerance,
      isCorrect
    });
    
    if (isCorrect) {
      // 验证成功
      setVerificationResult('success');
      setIsVerified(true);
      setShowResult(true);
      setDragProgress(100); // 设置进度为100%
      setTimeout(() => onVerify(true), 1200); // 延迟调用成功回调
    } else {
      // 验证失败
      setVerificationResult('fail');
      setShowResult(true);
      setTimeout(() => {
        setShowResult(false);
        setSliderPosition(0); // 重置滑块位置
        setVerificationResult(null);
      }, 1000);
      onVerify(false); // 立即调用失败回调
    }
  };

  /**
   * 刷新验证
   * 重新生成目标位置并重置所有状态
   */
  const handleRefresh = () => {
    const maxX = 200; // 最大可移动距离
    const randomX = Math.random() * maxX; // 生成新的随机目标位置
    setTargetPosition(randomX); // 设置新的目标位置
    setSliderPosition(0); // 重置滑块位置
    setDragProgress(0); // 重置进度
    setIsVerified(false); // 重置验证状态
    setVerificationResult(null); // 重置验证结果
    setShowResult(false); // 隐藏结果提示
  };

  return (
    <div className="slider-captcha-container">
      {/* 组件头部 - 标题和刷新按钮 */}
      <div className="slider-captcha-header">
        <span className="slider-captcha-title">请完成下列验证后继续</span>
        <div className="slider-captcha-actions">
          <button 
            className="slider-captcha-refresh" 
            onClick={handleRefresh}
            title="刷新"
          >
            🔄
          </button>
        </div>
      </div>

      {/* 图片验证区域 */}
      <div className="slider-captcha-image-container">
        <div className="slider-captcha-image">
          {/* 目标位置 - 虚线框指示用户需要拖拽到的位置 */}
          <div 
            className="slider-captcha-target"
            style={{
              left: `${targetPosition}px`,
              top: '40px',
              width: '30px',
              height: '30px'
            }}
          />
          
          {/* 拼图块 - 可拖拽的元素 */}
          <div 
            className="slider-captcha-puzzle-piece"
            style={{
              left: `${sliderPosition}px`,
              top: '40px',
              width: '30px',
              height: '30px',
              cursor: isDragging ? 'grabbing' : 'grab' // 根据拖动状态改变鼠标样式
            }}
            onMouseDown={handleMouseDown} // 绑定鼠标按下事件
          />
        </div>
      </div>

      {/* 滑块拖拽区域 */}
      <div className="slider-captcha-slider-container">
        <div className="slider-captcha-track">
          {/* 进度条 - 显示拖拽进度 */}
          <div 
            className="slider-captcha-progress"
            style={{ width: `${dragProgress}%` }}
          />
          {/* 滑块 - 可拖拽的滑块元素 */}
          <div 
            className={`slider-captcha-slider ${isDragging ? 'dragging' : ''}`}
            style={{ left: `${sliderPosition}px` }}
            onMouseDown={handleMouseDown} // 绑定鼠标按下事件
          >
            <span className="slider-captcha-arrow">→</span>
          </div>
        </div>
        {/* 操作说明和调试信息 */}
        <div className="slider-captcha-instruction">
          {isDragging ? '正在拖动...' : '按住滑块或拼图块进行拖动'}
          <div className="slider-captcha-debug">
            当前位置: {Math.round(sliderPosition)}px | 目标位置: {Math.round(targetPosition)}px | 容错范围: ±15px
          </div>
        </div>
      </div>

      {/* 验证结果提示 */}
      {showResult && (
        <div className={`slider-captcha-result ${verificationResult}`}>
          {verificationResult === 'success' ? '验证成功！' : '验证失败，请重试'}
        </div>
      )}

      {/* 组件水印 */}
      <div className="slider-captcha-watermark">
        CSDN @LuviaWu
      </div>
    </div>
  );
};

export default SliderCaptcha;